<!doctype html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<title>终点文学网注册页</title>
		<script src="__PUBLIC__/jq/jquery-3.0.0.min.js"></script>
		<style>
			a{
				text-decoration:none;
				color:black;
			}
			.head{
				width:100%;
				height:80px;
				background:#f8f8f8;
			}
			.head .h1{
				float:right;
				margin-right:20px;
				margin-top:20px;
				font-size:14px;
			}
			.main{
				width:80%;
				height:500px;
				margin:0 auto;
				margin-top:40px;
			}
			.main .left{
				width:60%;
				height:500px;
				float:left;
			}
			.main .right{
				width:35%;
				float:right;
			}
			.main .right div b{
				width:100%;
				height:50px;
				font-size:30px;
				line-height:50px;
			}
			a{
				text-decoration:none;
			}
			table{
				line-height: 50px;
			}
			input{
				width:200px;height:30px;border-radius:3px;border:1px solid black;
			}
		</style>
	</head>
	<body>
		<!-- 头部开始 -->
		<div class="head">
			<a href="<{:U('home/index/index')}>"><img src="__UPLOAD__/<{$b.photo}>" alt="" width=160 height=80 style="margin-left:20px"></a>
			<div class="h1"><a href="<{:U('home/index/index')}>">首页</a>&nbsp;&nbsp;<a href="<{:U('home/login/index')}>">登录</a> | <a href="<{:U('home/zhuce/index')}>">注册</a></div>
		</div>
		<!-- 头部结束 -->
		<!-- 主体开始 -->
		<div class="main">
			<!-- 主体左边 -->
			<div class="left"><img src="__PUBLIC__/image/login.jpg" alt="" width="100%" height=500></div>
			<!-- 主体左边结束 -->
			<!-- 主体右边 -->
			<div class="right">
			<center>
				<br>
				<div><b>注册</b></div><hr>
				<!-- 登录表单 -->
				<form action="<{:U('zhuce/zhuce')}>" method="post" name="regForm" onsubmit="return checkForm()">
					<table>
						<tr>
							<td><b>用户名:</b></td>
							<td><input type="text" name="name"></td>
						</tr>
						<tr><td id="u" style="color:red;font-size:10px" colspan='2'></td></tr>
						<tr>
							<td><b>邮箱:</b></td>
							<td><input type="email" name="email"></td>
						</tr>
						<tr><td id="e" style="color:red;font-size:10px" colspan='2'></td></tr>
						<tr>
							<td><b>手机号码:</b></td>
							<td><input type="text" name="phone" class="phone"></td>
						</tr>
						<tr><td id="h" style="color:red;font-size:10px" colspan='2'></td></tr>
						<tr>
							<td><b>密码:</b></td>
							<td><input type="password" name="password"></td>
						</tr>
						<tr><td id="p" style="color:red;font-size:10px" colspan='2'></td></tr>
						<tr>
							<td><b>确认密码:</b></td>
							<td><input type="password" name="repass"><input type="hidden" name="time" value="<?php echo time(); ?>"></td>
						</tr>
						<tr><td id="r" style="color:red;font-size:10px" colspan='2'></td></tr>
						<tr>
							<td><button id="a" style="height:30px;">获取手机验证码</button></td>
							<td><input type="text" name="syzm" class="syzm"></td>
						</tr>
						<tr>
							<td colspan='2'><input type="submit" value="注册" style="font-size:20px;font-weight:bold;margin-left:13%"></td>
						</tr>
					</table>
				</form>
				<a href="<{:U('Home/login/index')}>">已有账号？赶紧去登录吧！</a>
			</center>
			</div><!-- 主体右边结束 -->
		</div><!-- 主体结束 -->
	</body>
	<script>
		function checkForm(){
			// 验证用户名
			var name=document.regForm.name.value;
			if(name.match(/^\w{6,12}$/)===null){
				u.innerHTML="用户名必须是6~12位的字母、数字或下划线";
				return false;
			}else{
				u.innerHTML="";
			}
			// 验证邮箱
			var email=document.regForm.email.value;
			if(email.search(/^[\w-]+@[\w-]+(\.\w+){1,3}$/)===-1){
				e.innerHTML="邮箱格式错误";
				return false;
			}else{
				e.innerHTML="";
			}
			// 验证密码
			var password=document.regForm.password.value;
			if(password.length<6||password.length>18){
				p.innerHTML="密码长度必须是6~18位";
				return false;
			}else{
				p.innerHTML="";
			}
			var phone=document.regForm.phone.value;
			if(phone.length!=11){
				h.innerHTML="手机号长度必须是11位";
				return false;
			}else{
				p.innerHTML="";
			}
			var repass=document.regForm.repass.value;
			if(repass!==password){
				r.innerHTML="两次密码不一致";
				return false;
			}else{
				r.innerHTML="";
			}
			return true;
		}
		
		$(function(){
			$('#a').click(function(){
				var phone=$('.phone').val();
				$('#a').html('已获取');
				$.ajax({
					url:"<{:U('zhuce/ajax')}>",
					type:'post',
					dataType:'json',
					data:'phone='+phone,
					success:function(data){
						
					}
				})
				return false;
			})
		})
	</script>
</html>